<template>
  <view class="result-page">
    <image class="result-page-image" :src="setSrc" mode="aspectFit"></image>
    <view class="result-page-text">{{setText}}</view>
    <view class="result-page-subtext">{{setSubText}}</view>
    <view class="result-page-buttons" v-if="buttons.length">
      <button v-for="(button, index) of buttons" :type="button.type" plain="true" size="mini" :key="index" @click="button.handler">{{button.text}}</button>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'result',

    props: {
      /**
       * 图片资源地址，支持相对路径、绝对路径，支持 base64 码
       */
      src: {
        type: String,
        default: ''
      },
      /**
       * 主文案
       */
      text: {
        type: String,
        default: ''
      },
      /**
       * 副文案
       */
      subtext: {
        type: String,
        default: ''
      },
      /**
       * 结果页默认类型empty：页面丢失-lost 网络异常-network 无信息-empty
       */
      type: {
        type: String,
        default: 'empty'
      },
      /**
       * 按钮数组
       */
      buttons: {
        type: Array,
        default () {
          return []
        },
      },
    },

    data() {
      return {
        /**
         * 默认类型图案
         */
        typeSrc: {
          network: '',
          lost: '',
          empty: ''
        },
        /**
         * 默认类型文案
         */
        typeText: {
          // 网络连接异常
          network: '\u7f51\u7edc\u8fde\u63a5\u5f02\u5e38',
          // 暂无信息
          empty: '\u6682\u65e0\u4fe1\u606f'
        },
        /**
         * 默认类型副文案
         */
        typeSubText: {
          // 点击屏幕，重新加载
          network: '\u70b9\u51fb\u5c4f\u5e55\uff0c\u91cd\u65b0\u52a0\u8f7d',
          // 您要访问的页面已丢失
          lost: '\u60a8\u8981\u8bbf\u95ee\u7684\u9875\u9762\u5df2\u4e22\u5931'
        }
      }
    },

    computed: {
      /**
       * 设置图案
       */
      setSrc() {
        let src = this.typeSrc[this.type];
        if (this.src) {
          src = this.src;
        }
        return src;
      },
      /**
       * 设置文案
       */
      setText() {
        let text = this.typeText[this.type];
        if (this.text) {
          text = this.text;
        }
        return text;
      },
      /**
       * 设置副文案
       */
      setSubText() {
        let subText = this.typeSubText[this.type];
        if (this.subtext) {
          subText = this.subtext;
        }
        return subText;
      }
    }
  }
</script>

<style lang="scss">
  .result-page {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 40upx 0;

    &-image {
      width: 280upx;
      height: 280upx;
      margin-bottom: 80upx;
    }

    &-text {
      line-height: 1;
      color: #111a34;
      font-size: 36upx;
    }

    &-subtext {
      margin-top: 16upx;
      color: #858b9c;
      font-size: 32upx;
    }

    &-buttons {
      display: flex;
      flex-direction: row;

      button {
        margin: 10upx;
      }
    }

  }
</style>
